<template>
  <el-table :data="agents" style="width: 100%;padding-top: 15px;">
    <el-table-column label="应用ID" width="200">
      <template slot-scope="scope">
        {{ scope.row.ID }}
      </template>
    </el-table-column>
    <el-table-column label="" width="70" align="center">
      <template slot-scope="scope">
        <a link :href="scope.row.pprofUrl">pprof</a>
      </template>
    </el-table-column>
    <el-table-column label="CPU" width="150" align="center">
      <template slot-scope="scope">
        {{ scope.row.Cpu }}
      </template>
    </el-table-column>
    <el-table-column label="使用内存(RSS)" width="150" align="center">
      <template slot-scope="scope">
        {{ scope.row.Mem }}
      </template>
    </el-table-column>
    <el-table-column label="运行时间" align="center">
      <template slot-scope="scope">
        {{ scope.row.RunTime }}
      </template>
    </el-table-column>
    <el-table-column label="Tag" width="100" align="center">
      <template slot-scope="scope">
        {{ scope.row.Tag }}
      </template>
    </el-table-column>
    <el-table-column label="平台" width="200" align="center">
      <template slot-scope="scope">
        {{ scope.row.os }}
      </template>
    </el-table-column>
    <el-table-column label="版本" width="100" align="center">
      <template slot-scope="scope">
        {{ scope.row.Version }}
      </template>
    </el-table-column>
    <el-table-column label="操作" width="300" align="center">
      <template slot-scope="scope">
        <i v-show="!scope.row.isStart" class="el-icon-caret-right" @click="appStart(scope.row)" />
        <i v-show="scope.row.isStart" class="el-icon-remove-outline" @click="appStop(scope.row)" />
        <i v-show="serverVersion != scope.row.Version " class="el-icon-refresh" @click="appUpdate(scope.row)" />
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { Message } from 'element-ui'

import { Agents, AgentStopProcess,
  AgentStartProcess, AgentProcessExecUpdate } from '@/api/api'
export default {
  data: function() {
    return {
      agents: [],
      os: '',
      app: '',
      serverVersion: ''
    }
  },
  mounted() {
    this.loadAgents()
    setInterval(this.loadAgents, 60000)
  },
  methods: {
    setServerVersion(version) {
      this.serverVersion = version.trim()
    },
    loadAgents() {
      var ts = this
      ts.os = ts.os.trim()
      ts.app = ts.app.trim()
      if (ts.os === '' || ts.app === '') {
        return
      }
      ts.agents = []
      Agents(this.os, this.app).then((res) => {
        if (res.data) {
          res.data.forEach(e => {
            var agent = {
              ID: e.ID,
              Tag: e.Tag,
              state: 'info',
              os: e.OS,
              isStart: e.IsStart,
              Version: e.Version,
              RunTime: e.RunTime,
              Client: e.Client,
              Mem: e.Mem,
              Cpu: e.Cpu,
              pprofUrl: '/v1/pprof?path=/debug/pprof&agent=' + e.Client
            }
            if (!e.Mem) {
              agent.Mem = '-'
            } else {
              agent.Mem = agent.Mem + 'M'
            }
            if (!e.Cpu) {
              agent.Cpu = '-'
            } else {
              agent.Cpu = agent.Cpu + '%'
            }
            ts.agents.push(agent)
          })
        }
      })
    },
    getAgents(os, app) {
      this.os = os
      this.app = app
      this.loadAgents()
    },
    // 应用启动
    appStart(app) {
      AgentStartProcess(app.Client).then(res => {
        if (res.code === 0) {
          app.isStart = true
          Message({
            message: app.ID + '已启动',
            type: 'success',
            duration: 5 * 1000
          })
        } else {
          Message({
            message: res.errMsg,
            type: 'error',
            duration: 5 * 1000
          })
        }
      })
    },
    // 应用停止
    appStop(app) {
      var ts = this
      this.$confirm('是否确认要停止该应用[' + ts.app + '-' + app.ID + ']', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        AgentStopProcess(app.Client).then(res => {
          if (res.code === 0) {
            app.isStart = false
            Message({
              message: app.ID + '已停止',
              type: 'success',
              duration: 5 * 1000
            })
          } else {
            Message({
              message: res.errmsg,
              type: 'error',
              duration: 5 * 1000
            })
          }
        })
      }).catch(() => {

      })
    },
    // 应用版本更新
    appUpdate(app) {
      var ts = this
      this.$confirm('更新应用[' + ts.app + '-' + app.ID + ']可能会导致应用暂时停止', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        AgentProcessExecUpdate(app.Client).then(res => {
          if (res.code === 0) {
            Message({
              message: app.ID + '已更新',
              type: 'success',
              duration: 5 * 1000
            })
            setTimeout(this.appList, 10000) // 10秒后重新加载列表
          } else {
            Message({
              message: res.errmsg,
              type: 'error',
              duration: 5 * 1000
            })
          }
        })
      }).catch(() => {

      })
    }
  }
}
</script>
<style lang="scss" scoped>
td i {
  font-size: 20px
}
.el-icon-caret-right{
  color: #67c23a;
  cursor: pointer
}
.el-icon-remove-outline{
  color: #909399;
  cursor: pointer
}
.el-icon-s-tools {
  color:#e6a23c;
  cursor: pointer
}
.el-icon-refresh {
  color:#409eff;
  cursor: pointer
}
.el-icon-delete {
  color: #f56c6c;
  cursor: pointer
}
</style>
